<template>
  <div>
     
      <el-image :src="require('../../img/bigIcon/doctor.jpg')"></el-image>
      <el-row>
          <el-col span="6" v-for="(item,index) in doctors" :key="item">
              <!--<router-link :to="{name:'doctorInformation',params:{doctor:item}}" tag="div" class="doctorDiv" v-show="index!=3">
                   <el-avatar :size="150" :src="require('../../img'+item.tDoctorInfo.headImg)"></el-avatar>
                  <br><br><span style="color:aqua;font-size:20px">{{item.name}}   </span>
                  <span>{{item.tDoctorInfo.duty}}</span><br><br>
                  <label style="color:grey;font-size:14px">{{item.tClinicDepartment.name}}</label><br><br>
                  <label style="color:grey;font-size:14px">{{item.tDoctorInfo.hospital}}</label><br><br>
                  <label style="color:grey;font-size:14px">擅长：{{item.tDoctorInfo.speciality}} </label>

              </router-link>-->
              <div class="doctorDiv" v-show="index!=3" @click="queryDoctorInfo(item)">
                   <el-avatar :size="150" :src="require('../../img'+item.tDoctorInfo.headImg)"></el-avatar>
                  <br><br><span style="color:aqua;font-size:20px">{{item.name}}   </span>
                  <span>{{item.tDoctorInfo.duty}}</span><br><br>
                  <label style="color:grey;font-size:14px">{{item.tClinicDepartment.name}}</label><br><br>
                  <label style="color:grey;font-size:14px">{{item.tDoctorInfo.hospital}}</label><br><br>
                  <label style="color:grey;font-size:14px">擅长：{{item.tDoctorInfo.speciality}} </label>

              </div>

              <div class="doctorDiv" v-show="index==3">

                <el-image style="width:100px;padding-top:80px" :src="require('../../img/littleIcon/two.jpg')"></el-image>
                <br>
                <span>微信扫一扫在线咨询</span><br><br>
                <label style="color:grey;font-size:14px">专业医生为你解答</label><br><br>
              </div>
          </el-col>
         
      </el-row>
     
      <InformationBottom></InformationBottom>

  </div>
</template>

<script>
import InformationBottom from '../../components/healthyInformation/InformationBottom.vue'
import axios from 'axios'
export default {
    data() {
      return {
        doctors:[]
      }
    },
    methods:{
         initDoctor(){
          axios.get("/sysUser/queryDoctor").then((response)=>{
            this.doctors=response.data;
          })
        },
        queryDoctorInfo(doctor){
            //alert(doctor);
            this.$store.commit("setDoctor",{doctor:doctor});
            this.$router.push("/doctorInformation");
        }
    },
    components:{
            InformationBottom 
    },
    mounted() {
      this.initDoctor();
    },
}
</script>

<style>
.doctorDiv {
     box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      height: 340px;
      /*color: aqua;*/
    }
</style>